<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="http://cdn.socket.io/stable/socket.io.js"></script>
  <script>WEB_SOCKET_SWF_LOCATION = 'http://cdn.socket.io/stable/WebSocketMain.swf';</script>
  <script>
    window.onload = function() {

        var s = new io.Socket(window.location.hostname, {port: 8001, rememberTransport: false});
        s.connect();

        s.addEvent('connect', function() {
            s.send('New participant joined');
        });

        s.addEvent('message', function(data) {
            $("#chat").append("<div>" + data + "</div>");
        });

        //send the message when submit is clicked
        $('#chatform').submit(function (evt) {
            var line = $('#chatform [type=text]').val()
            $('#chatform [type=text]').val('')
            s.send(line);
            return false;
        });
    };
</script>
</head>
<body>
<h3>Chat!</h3>
<div id="chat" style="width: 60em; height: 20em; overflow:auto; border: 1px solid black">
</div>
<form id="chatform">
<input type="text" />
<input type="submit" />
</form>
</body>
</html>